<script lang="ts" setup>
import { ref } from 'vue';

const value = ref(9.58);
const color = ref([
    { color: '#67C23A', percentage: 40 },
    { color: '#E6A23C', percentage: 60 },
    { color: '#F56C6C', percentage: 80 },
]);

const format = (percentage: number) => {
    return `${percentage}G`;
};
</script>

<template>
    <el-card shadow="never" header="当前已用量">
        <el-progress :text-inside="true" :stroke-width="20" :color="color" :percentage="value" :format="format" />
        <el-row :gutter="15" style="margin-top: 20px">
            <el-col :lg="6">
                <el-card shadow="never">
                    <el-statistic group-separator="," :precision="2" :value="7.41" title="文档" suffix="GB" />
                </el-card>
            </el-col>
            <el-col :lg="6">
                <el-card shadow="never">
                    <el-statistic group-separator="," :precision="2" :value="12.9" title="图片" suffix="GB" />
                </el-card>
            </el-col>
            <el-col :lg="6">
                <el-card shadow="never">
                    <el-statistic group-separator="," :precision="2" :value="68.79" title="视音频" suffix="GB" />
                </el-card>
            </el-col>
            <el-col :lg="6">
                <el-card shadow="never">
                    <el-statistic group-separator="," :precision="2" :value="17.58" title="其他" suffix="GB" />
                </el-card>
            </el-col>
        </el-row>
    </el-card>
</template>

<style></style>
